"use client"
import React, { useEffect, useRef } from 'react';
declare global {
    interface Window {
        TMap?: any; // 可替换为更精确的类型（见下文）
    }
}

const data = [
    { lat: 33.219294, lng: 111.068084, radius: 5000, style: 'style1' },
    { lat: 39.9087, lng: 116.3975, radius: 10000, style: 'style1' },
    { lat: 39.914961477236766, lng: 116.3898104098216, radius: 5000, style: 'style2' },
    { lat: 39.9201, lng: 116.3373, radius: 5000, style: 'style2' },
    { lat: 39.870612, lng: 116.439311, radius: 5000, style: 'style2' },
    { lat: 39.933175, lng: 116.275105, radius: 5000, style: 'style2' },
    { lat: 39.997959, lng: 116.281896, radius: 5000, style: 'style2' },
    { lat: 39.874752, lng: 116.23101, radius: 5000, style: 'style2' },
    { lat: 39.90377, lng: 116.227691, radius: 5000, style: 'style2' },
    { lat: 39.869761, lng: 116.364304, radius: 5000, style: 'style2' },
    { lat: 39.996873, lng: 116.295021, radius: 5000, style: 'style2' },
];

// 动态加载腾讯地图 SDK
const loadTMapSDK = (key: string) => {
    return new Promise((resolve, reject) => {
        if (window.TMap) {
            resolve(window.TMap);
            return;
        }
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = `https://map.qq.com/api/gljs?v=2.exp&key=${key}&libraries=visualization`;
        script.onload = () => resolve(window.TMap);
        script.onerror = () => reject(new Error('TMap SDK 加载失败'));
        document.head.appendChild(script);
    });
};
const ChinaMap = () => {
    const mapContainerRef = useRef(null);
    const mapRef: any = useRef(null); // 存储地图实例
    const radiationCircleRef: any = useRef(null);
    const dotRef: any = useRef(null);

    useEffect(() => {
        const Init = async () => {
            // 1. 加载 SDK
            await loadTMapSDK('OYLBZ-V52WL-ZOZP7-EL2WI-WCKGZ-B5BQG'); // 替换为你自己的 key
            // 2. 创建地图
            mapRef.current = new window.TMap.Map(mapContainerRef.current, {
                zoom: 12,
                center: new window.TMap.LatLng(39.914961477236766, 116.3898104098216),
                mapStyleId: 'style1',
                renderOptions: {
                    enableBloom: true,
                },
            });
            mapRef.current.removeControl('zoom') //移除缩放控件
            mapRef.current.removeControl('scale') //移除比例尺控件
            mapRef.current.removeControl('rotation') //移除旋转控件

            // 3. 添加辐射圈
            radiationCircleRef.current = new window.TMap.visualization.Radiation({
                styles: {
                    style1: {
                        fillColor: 'rgba(29,250,242,0.9)',
                    },
                },
                processAnimation: {
                    duration: 3000,
                },
            }).addTo(mapRef.current);

            radiationCircleRef.current.setData(data.map((v) => ({
                center: new window.TMap.LatLng(v.lat, v.lng),
                radius: v.radius,
                styleId: 'style1'
            })));

            // 4. 添加散点图
            dotRef.current = new window.TMap.visualization.Dot({
                styles: {
                    style1: { radius: 5 },
                    style2: { fillColor: 'rgba(29,250,242,1)', radius: 3 },
                },
                enableBloom: true,
            }).addTo(mapRef.current);

            dotRef.current.setData(data.map((v) => ({
                lat: v.lat,
                lng: v.lng,
                styleId: v.style
            })));
        };
        Init();
    }, []);
    return (<>
        <div id="container" ref={mapContainerRef} style={{ width: '100%', height: '100%', position: 'relative' }} />
        <div
            id="name"
            style={{
                position: 'absolute',
                bottom: '10px',
                right: '20px',
                fontSize: '12px',
                color: '#ffffff',
                zIndex: 100,
            }}
        >
            北京市租电站分布情况
        </div>
    </>);
};

export default ChinaMap;